import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import { Row, Col } from 'antd';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class orderDetail extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      orderDetail:[],
      detailItem:[],
      loading:true
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    const query = location.search;
    console.log(query)
    const order_id = query.substr(4);
    console.log(order_id)
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: localeData[localStorage.locale].OrderDetailTitle,
        path: location.pathname + location.search
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/row?_c=app_user_order_row",
          params: [
            {
              key: "order_id",
              value:order_id
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          this.setState({
            orderDetail:data,
            loading:false
          })
          console.log(data)
        }
      }
    })
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_order_detail",
          params: [
            {
              key: "order_id",
              value:order_id
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          this.setState({
            detailItem:data,
            loading:false
          })
          console.log(data)
        }
      }
    })

  }
  renderList() {
    let { detailItem } = this.state;
    if (!detailItem || detailItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T(localeData[localStorage.locale].goodsDetailCartNoGood)}
        </div>
      )
    }
    else {
      let contents = [];
      return (
        <div >
          <div style={{ padding: "5px 10px", fontSize: "16px", wordBreak: "break-all", lineHeight: 2 }} className="ellipsis1">
            {localStorage[MI_APP_CODE + "name"]}
          </div>
          <div>
            {
              detailItem.map((i, k) => {
                let { img_url, goods_name, price, quantity, item_id } = i;
                let img_url1=i.img_url.split(",")[0]
                return (
                  <Row key={k} style={{ padding: "8px 0px ", borderBottom: "1px solid #ddd",overflow:'hidden' }}>
                    {/*<div style={{float:'left',border:'1px solid #EEEDF2',width:'24px',heigth:'32px',textAlign:'center',lineHeight:'32px',color:'#595867',fontSize:'12px',fontWeight:'bold',marginTop:'10px'}}>{quantity}</div>*/}
                    {/*<div style={{float:'left',color:'#9C9BAB',fontSize:'13px',width:'24px',heigth:'32px',textAlign:'center',lineHeight:'32px',marginTop:'10px'}}>x</div>*/}
                    <Col span={4} style={{width:'56px',height:'56px'}}><img src={handleOSS(img_url1)} style={{width:'56px',height:'56px'}}/></Col>
                    <Col span={14} style={{color:'#595867',fontSize:'13px',width:'62%',margin:'5px 5% 5px 10px'}} className="ellipsis2">{goods_name}</Col>
                    <Col span={4} style={{color:'#F09600',fontSize:'15px',fontWeight:'bold',marginTop:'10px'}}>
                      <div style={{textAlign:'left'}}>€{price}</div>
                      <div style={{color:'#9C9BAB',fontSize:'12px',textAlign:'right'}}>x{quantity}</div>
                    </Col>
                  </Row>
                )
              })
            }
          </div>
        </div>
      )
    }
  }
  render(){
    let {dispatch} = this.props;
    let {orderDetail,loading} = this.state;
    const messages = localeData[localStorage.locale];
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text={messages.loading} animating={true} />
        </div>
      )
    }
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div style={{height:"100%",position: 'relative',height:'100%',background:'#fff'}}>
        <div style={{padding:'16% 3% 4% 5%',borderBottom:'10px solid #F3F3F5',fontWeight:'bold'}}>
          <div style={{overflow:'hidden',}}>
            <div style={{float:'left',width:'85%',color:'#2E2D35'}}>{orderDetail.order_type}</div>
            <div style={{float:'left',color:'#F09600'}}>€{orderDetail.total_amount}</div>
          </div>
          <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderTime}</div>
          <div style={{color:'#595867',fontSize:'12px'}}>{orderDetail.created_time}</div>
          <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderCode}</div>
          <div style={{color:'#595867',fontSize:'12px'}}>{orderDetail.order_code}</div>
          <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].OrderDetailAddress}</div>
          <div style={{color:'#595867',fontSize:'12px'}}>{orderDetail.address}</div>
        </div>

        <div style={{ margin: "12px 26px",width:'86%',height:'64px',border:'1px solid #EDEEF2' }} className="text">
        <InputItem
          labelNumber={8}
          clear
          onChange={(e) => {
            this.setState({
              leaveMessage: e
            })
          }}
          placeholder={messages.placeOrderSelfText}
        ></InputItem>
      </div>
        <div style={{padding:'0 16px 0px'}}>
          {this.renderList()}

        </div>
        <div style={{color: "#9C9BAB",fontWeight:'bold',fontSize:'12px',marginBottom:'10px'}}>
          <div data-flex="cross:center box:first" style={{ padding: "10px", paddingLeft: "25px", height: "44px", }}>
            <div style={{ marginRight: "10px", }}>
              {T(messages.placeOrderSelfPrice)}：
            </div>
            <div style={{  textAlign: "right", }}>
              € {orderDetail.pay_amount}
            </div>
          </div>
          <div data-flex="cross:center box:first" style={{ padding: "10px", paddingLeft: "25px", height: "44px" }}>
            <div style={{ marginRight: "10px" }}>
              {T(messages.placeOrderSelfOrder)}：
            </div>
            <div style={{textAlign: "right",}}>€{orderDetail.freight_amount}</div>
          </div>
          <div data-flex="cross:center box:first" style={{ padding: "10px", paddingLeft: "25px", height: "44px", }}>
            <div style={{ marginRight: "10px",color:'#595867' }}>
              {T(messages.placeOrderSelfSub)}：
            </div>
            <div style={{  textAlign: "right",color:'#F09600',fontSize:'20px' }}>
              € {orderDetail.total_amount}
            </div>
          </div>
        </div>
      </div>
      </IntlProvider>
    )
  }
}
